<template>
	<view class="out-box">

			<view class="menban">
				尚未发布
			</view>
			<view class="carousel">
				<!-- goodsData：轮播图数据  @setShowVideo：视频按钮点击事件 -->
				<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
					<!-- 预览视频弹窗 -->
					<view class="mask" v-if="showVideo" @touchmove.stop.prevent="ondefault" @click="hideShow">
						<view class="close">
							<image src="../../static/images/close.png"></image>
						</view>
					</view>
					<view class="previewvideo" v-if="showVideo">
						<view class="videos">
							<video class="nowvideos" id="nowVideo" v-if="showVideo" :src="goodsData.videos"
								:autoplay="showVideo" :show-center-play-btn="true" :show-mute-btn="true"
								:show-fullscreen-btn="false"></video>
						</view>
					</view>
					<!-- 用来承载H5预览视频的 -->
					<view style="position: absolute;top: -999rpx;left: -999rpx;">
						<video id="newVideo" ref="newVideo" :src="goodsData.videos" :autoplay="showVideo"
							:show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"
							@fullscreenchange="hideShow"></video>
					</view>
			</view>
			<view class="header">
				<view class="header_title"><span v-if="lists.result.is_swerve == 1" class="span1">急转 | </span>{{ lists.result.title }}</view>
				<view class="header_money">{{(lists.result.rent == null ||lists.result.rent == 0)? '面议':  '￥' +  lists.result.rent }}
					<span v-if="lists.result.rent != null && lists.result.rent != 0" class="span2">元/月</span>
				</view>
				<!-- <view v-if="lists.result.feature_label" class="header_label">
					<view v-for="item1,index1 in lists.result.feature_label.split(',')" :key="index1">
						<view class="label_item">{{ item1}}</view>
					</view>
				</view> -->
				<view v-if="lists.result.feature_label" class="item_right_identifying">
					<view class="item_right_identifying_item" v-for="item1,index1 in lists.result.feature_label.split(',')" :key="index1">
						<view >{{ item1}}</view>
					</view>
				</view>
				<view class="header_information">
					<view class="information_item">
						<view class="item_top" style="font-size: 24rpx;">{{  lists.result.shop_area}}m²</view>
						<view class="item_bottom">使用面积</view>
					</view>
					<view class="information_item">
						<view class="item_top">{{lists.result.is_swerve == 1 ?'是':'否' }}</view>
						<view class="item_bottom">是否急租</view>
					</view>
					<view class="information_item">
						<view class="item_top" style="font-size: 28rpx;">{{lists.result.transfer_fee == null|| lists.result.transfer_fee == '' ?'面议':  lists.result.transfer_fee }}</view>
						<view class="item_bottom">转让费</view>
					</view>
					<!-- <view class="information_hr"></view> -->
					<view class="information_item">
						<view class="item_top">{{lists.result.shop_type == null ?'面议':  lists.result.shop_type }}</view>
						<view class="item_bottom">店铺类型</view>
					</view>
					<!-- <view class="information_hr"></view> -->
				</view>
				<view class="header_user">
					<view class="user_dotu">
						<view class="user_itemone">地址：
							<span class="span2">{{ lists.result.province +'-'+ lists.result.city +'-' + lists.result.county}}</span>
						</view>
						<!-- <view class="user_icon" @tap="todutu()">
							<image class="icon_img" src="../../static/images/正在定位.png"></image>
							<view class="icon_text">查看地图</view>
						</view> -->
					</view>
					<view class="information_hr"></view>
					<view class="user_item" v-show="lists.result.name">联系人：<span class="span2">{{ lists.result.name }}</span></view>
					<view class="user_item">联系电话：<span class="span2">{{ lists.result.phone }}</span></view>
					<view class="information_hr"></view>
					<view class="user_dotuone" v-show="lists.result.detailed_introduction">
						<view class="user_itemtwo">店铺详情：</view>
						<view class="span2" v-html="lists.result.detailed_introduction"></view>
					</view>
					<view class="information_hr"></view>
					<view class="user_item">更新时间：<span class="span2">{{ lists.result.update_time !=null? lists.result.update_time :lists.result.create_time}}</span></view>
				</view>

				<view class="visits_title">
					<view class="visits_title_left"></view>
					<view class="visits_title_right">店铺转让信息</view>
				</view>
				<!-- 下方的曝光量 -->
				<view class="visits">
					<view class="information_item">
						<view class="item_top">0</view>
						<view class="item_bottom">访问量</view>
					</view>
					<view class="information_item">
						<view class="item_top">0</view>
						<view class="item_bottom">曝光量</view>
					</view>
					<view class="information_item">
						<view class="item_top">0</view>
						<view class="item_bottom">电话查看</view>
					</view>
				</view>
				<!-- <view class="header_warn">联系我时，请一定说明是“铺铺转”看到的</view> -->
			</view>
			<view class="mian">声明：本信息来自客户提供，如有侵权，请联系平台删除</view>

		<view class="bottom">
			<view class="bottom_main">
				<!-- <view class="mian_left" @tap="toindex()">
					<view class="left_top"></view>
					<view class="left_bottom">首页</view>
				</view>
				<view class="main_center" @tap="oncollect()">
					<view :class="lists.result.is_collect == true ?'center_top center_topclick':'center_top'"></view>
					<view class="center_bottom">收藏</view>
				</view> -->
				<!-- <view class="release" @tap="tosublease()">发布转让信息</view>
				<view class="main_right" @tap="toipone()">
					<i class="right_i"><uni-icons type="phone" color="#fff" size="22"></uni-icons></i>
					电话咨询
				</view> -->
				<view class="pey" @tap="pay">继续发布</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref,reactive, onMounted, onBeforeMount} from 'vue'
import {onGotApiData,addClick} from '../../util/api.js'
// 定义ref
	let newVideo = ref(null) 
	// 从上个页面获取到参数
	const props = defineProps({
			id: String,
			shop_type:String,
			obj:String
		});
		const index_item = props.id
		const index_shop_type = props.shop_type
		const index_obj = props.obj
		// const index_item = JSON.parse(decodeURIComponent(props.obj))
		console.log("从上个页面获取到参数11",props)
	// 在组件渲染之前执行
	onBeforeMount(() => {
		console.log('组件准备渲染',);
		// user.look_num = uni.getStorageSync('look_num');
		// 判断用了几次
		// if(user.look_num >= 3){
		// 	// 超过三次直接跳转到小程序
		// 	towx()
		// }
		user.obj = JSON.parse(index_obj);
		const link = uni.getStorageSync('link');
		console.log('obj',user.obj)
		user.obj.link = link

			// 调用店铺详细信息的接口
			lists_post()

				// 调用求租店铺详细信息的接口
			// listss_post()
		

		newVideo.value = uni.createVideoContext('newVideo');
		console.log('视频对象', newVideo.value)
	})
	// 在组件渲染完成后执行
	onMounted(() => {
		console.log('组件已经渲染完毕',);
	});

	// 个人详细信息
	let user = reactive({
		user_id:'',
		id:index_item,
		url:'',
		obj:{},
		shop_type: index_shop_type,
		look_num:0
	})

	  // 店铺详细信息
	let lists = reactive({
			result: {}
		});
		// 请求店铺详细信息接口
	const lists_post = () =>{
		let params = reactive({
			id : user.id
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_transfer/info','GET',params,lists_value)
	}
	// 店铺详细信息请求的结果
	const lists_value = (result) => {
		// 免费访问次数加一
		// console.log("aaa",user.look_num,user.look_num ++) 
		// user.look_num = user.look_num ++
		// uni.setStorageSync('look_num', user.look_num);

		lists.result = result
		console.log('lists_value请求成功',lists.result)
		goodsData.videos = lists.result.videoUrl
		goodsData.imgList = lists.result.imgs
	}

		// 请求求租店铺详细信息接口
		const listss_post = () =>{
		let params = reactive({
			id : user.id
		})
		console.log("params",params)
		onGotApiData('/h5/api/app/shop_rent/info','GET',params,listss_value)
	}
	// 店铺详细信息请求的结果
	const listss_value = (result) => {
		lists.result = result
		console.log('lists_value请求成功',lists.result)
	}


	
	// 轮播图相关的变量
	let goodsData = reactive({
		videos: '',
		imgList: [],
	})

	let showVideo = ref(false)
			//操作视频
	const setShowVideo = (isshowVideo, isH5) => {
		    console.log("操作视频",isshowVideo,isH5)
			showVideo.value = true
			// alert('我是isshowVideo' + isshowVideo + 'h5'+ isH5)
			// console.log("视频对象", newVideo.value)
			newVideo.value.play()
			// if (isH5 == true) {
			// 	showVideo.value = isH5
			// 	console.log('视频');
			// 	newVideo.value.play()
			// }
			console.log('视频点击播放');
		}
		// 关闭视频
	const hideShow = () =>{
		console.log("关闭视频")
			showVideo.value = false
		}
		
	// 地图相关变量方法
	const todutu = ()=>{
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				}
		});
	}
	// 点击返回首页
	const toindex = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		});
	}
	// 点击收藏按钮
	const oncollect = () =>{
		addClick('h5_店铺详情','收藏')
		// 先查询有没有登录账号
		if(!user.user_id){
			uni.showToast({
				title: '请先登录...',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 1000
			}) 
			uni.navigateTo({
				url: '/pages/login/login'
			});
			return
		}

		let params = reactive({
			sid : lists.result.id,
			user_id: user.user_id,
			type:1,
			method_type : !lists.result.is_collect
		})
		console.log("params",params)
		onGotApiData('/api/app/collect/update','POST',params)
		// 提示成功
		// uni.showToast({
		// 		title: '收藏成功',
		// 		//将值设置为 success 或者直接不用写icon这个参数
		// 		icon: 'success',
		// 		//显示持续时间为 2秒
		// 		duration: 1600
		// 	}) 

		// 请求结束改变图标颜色
		lists.result.is_collect = !lists.result.is_collect
	}

	// 点击下方发布转租
	const tosublease =() =>{
		addClick('H5店铺详情','发布转租按钮')
		uni.navigateTo({
			url: '/pages/release_transfer/release_transfer'
		});
	}

	// 点击拨打手机号
	const toipone = () =>{
		addClick('H5店铺详情','电话咨询按钮')

		// 获取手机号
		// ipone_num_post()
		// 跳转到小程序
		towx()
	}
	// 跳转到小程序
	const towx = () =>{
		const link = uni.getStorageSync('link');
		let params = reactive({
			link :  link,
			env_version: 'release'
		})
		console.log("params",params)
		onGotApiData('/api/app/xcx/jump_xcx','GET',params,towx_value)
	}
	// 返回的结果
	const towx_value =(result) =>{
		window.location.href = result.openlink
	}


		// 获取手机号相关的变量方法
	let ipone_num = ref(null);
	const ipone_num_post = () =>{
		let params = reactive({
			id :  lists.result.id,
			user_id: user.user_id
			
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_transfer/get_phone','GET',params,ipone_num_value)
	}
	// 店铺详细信息请求的结果
	const ipone_num_value = (result) => {
		ipone_num.value = result
		console.log('ipone_num',ipone_num.value)
		// 拨通手机号
		uni.makePhoneCall({
			phoneNumber: ipone_num.value 
		});
	}	

// 点击支付
const pay = () =>{

		// 返回上个页面去支付
		uni.navigateBack({
			delta: 1
		});
		return


		uni.showLoading({
			title: '支付中',
			duration: 2000
		});

	onGotApiData('/api/app/order/create_v1','POST',user.obj,pay_result)
}
	// 支付请求的结果
	const pay_result = (result) => {
		console.log('支付请求结果',result)
		// 唤起微信支付
		requestPayment(result)
	}
	// 唤起支付
	const requestPayment = (result) => {
		// 清除弹框
		setTimeout(function(){
			uni.hideLoading();
		})
		console.log("请球支付结果",result)
		const urll = result.payUrl
		console.log('url',urll)
		uni.setStorageSync('urll',urll);
			window.location.href = result.payUrl
	}
</script>

<style lang="scss" scoped>
	.out-box{
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		font-family: '思源黑体';
		overflow: hidden;
		background-color: #FFF7F7;
		width: 750rpx auto;
		position: relative;
		.menban{
			width: 100vw;
			height: 410rpx;
			// background-size: cover;
			position: absolute;
			top: 0rpx;
			z-index: 100;
			background-color:rgba(0, 0, 0, 0.3);
			// margin-top: 8rpx;
			border-radius: 8rpx;
			line-height: 400rpx;
			text-align: center;
			color: #fff;
			font-weight: 600;
			font-size: 46rpx;

		}
		.carousel{
			width: 750rpx;
			// height: 100rpx;
			margin: 0 auto;
			.swiper-item{
				width: 740rpx;
				height: 330rpx;
				.imageone{
					width: 740rpx;
					height: 100%;
					background-size: cover;
				}
			}
		}
		.header{
			width: 750rpx;
			// height: 100rpx;
			margin: 0 auto;
			// margin-top: 10rpx;
			background-color: #fff;
			border-radius: 10rpx;
			.header_title{
				width: 740rpx;
				// height: 100rpx;
				margin: 0 auto;
				padding-top: 30rpx;
				color:#333333 ; 
				font-family: PingFang SC-Medium;
				line-height: 56rpx;
				font-size: 36rpx;
				text-indent:20rpx; 
				font-weight: 600;
				.span1{
					color: rgba(0, 92, 241, 1);
				}
			}
			.header_money{
				width: 690rpx;
				height: 50rpx;
				padding-top: 20rpx;
				margin: 0 auto;
				font-size: 38rpx;
				font-family: PingFang SC-Medium;
				font-weight: 600;
				color: rgba(0, 92, 241, 1);
				line-height: 47rpx;			
				.span2{
					// color: rgba(255, 87, 51, 1);
					font-size: 26rpx;
				}
			}
			// .header_label{
			// 	width: 740rpx;
			// 	// height: 80rpx;
			// 	display: flex;
			// 	flex-wrap: wrap;
			// 	margin: 2rpx 0 20rpx 0;
			// 	.label_item{
			// 		// width: 110rpx;
			// 		height: 44rpx;
			// 		padding: 0 2rpx 0 2rpx;
			// 		margin: 20rpx 0 0 20rpx;
			// 		// background-color: pink;
			// 		border: 1px solid rgba(255, 141, 26, 1);
			// 		font-size: 24rpx;
			// 		color: rgba(255, 141, 26, 1);
			// 		font-weight: 500;
			// 		line-height: 44rpx;
			// 		text-align: center;
			// 		border-radius: 10rpx;
			// 	}
			// }
			.item_right_identifying{
				width: 720rpx;
				// height: 40rpx;
				margin: 6rpx 0 16rpx 0;
				display: flex;
				flex-wrap: wrap;
				// margin-top: 2rpx;
				// text-overflow: ellipsis;
				// overflow: hidden;
				// white-space: nowrap;
				// border: 1px solid black;
				.item_right_identifying_item{
					// width: 120rpx;
					height: 32rpx;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 30rpx;
					padding: 5rpx 14rpx;
					margin-left: 14rpx;
					text-align: center;
					// background-color: rgba(249,189,82,0.12);
					color:#005CF1;
					border: 1px solid #005CF1;
					border-radius: 60rpx;
					// &:nth-child(1) {
					// 	background-color: rgba(249,189,82,0.12);
					// 	color:#F9BD52;
					// }
					// &:nth-child(2) {
					// 	background-color: rgba(156,126,255,0.12) ;
					// 	color:#9C7EFF ;
					// }
					// &:nth-child(3) {
					// 	background-color: rgba(63,210,140,0.12);
					// 	color:#3FD28C;
					// }
					// &:nth-child(4) {
					// 	background-color:rgba(210,63,63,0.12);
					// 	color:#D23F3F;
					// }
					// &:nth-child(5) {
					// 	background-color:rgba(79,75,255,0.12);
					// 	color:#4F4BFF;
					// }
					// &:nth-child(6) {
					// 	background-color: rgba(255,0,214,0.12);
					// 	color:#FF00D6 ;
					// }
					// &:nth-child(7) {
					// 	background-color: rgba(249,189,82,0.12);
					// 	color:#F9BD52;
					// }
					// &:nth-child(8) {
					// 	background-color: rgba(156,126,255,0.12) ;
					// 	color:#9C7EFF ;
					// }
					// &:nth-child(9) {
					// 	background-color: rgba(63,210,140,0.12);
					// 	color:#3FD28C;
					// }
					// &:nth-child(10) {
					// 	background-color:rgba(210,63,63,0.12);
					// 	color:#D23F3F;
					// }
					// &:nth-child(11) {
					// 	background-color:rgba(79,75,255,0.12);
					// 	color:#4F4BFF;
					// }
					// &:nth-child(12) {
					// 	background-color: rgba(255,0,214,0.12);
					// 	color:#FF00D6 ;
					// }
					// &:nth-child(13) {
					// 	background-color: rgba(249,189,82,0.12);
					// 	color:#F9BD52;
					// }
					// &:nth-child(14) {
					// 	background-color: rgba(156,126,255,0.12) ;
					// 	color:#9C7EFF ;
					// }
					// &:nth-child(15) {
					// 	background-color: rgba(63,210,140,0.12);
					// 	color:#3FD28C;
					// }
					// &:nth-child(16) {
					// 	background-color:rgba(210,63,63,0.12);
					// 	color:#D23F3F;
					// }
					// &:nth-child(17) {
					// 	background-color:rgba(79,75,255,0.12);
					// 	color:#4F4BFF;
					// }
					// &:nth-child(18) {
					// 	background-color: rgba(255,0,214,0.12);
					// 	color:#FF00D6 ;
					// }
					// &:nth-child(19) {
					// 	background-color: rgba(249,189,82,0.12);
					// 	color:#F9BD52;
					// }
					// &:nth-child(20) {
					// 	background-color: rgba(156,126,255,0.12) ;
					// 	color:#9C7EFF ;
					// }
					// &:nth-child(21) {
					// 	background-color: rgba(63,210,140,0.12);
					// 	color:#3FD28C;
					// }
					// &:nth-child(22) {
					// 	background-color:rgba(210,63,63,0.12);
					// 	color:#D23F3F;
					// }
					// &:nth-child(23) {
					// 	background-color:rgba(79,75,255,0.12);
					// 	color:#4F4BFF;
					// }
				}
			}
			.header_information{
				width: 720rpx;
				height: 140rpx;
				margin: 0 auto;
				margin-top: 30rpx;
				border-top: 1px solid #F0F0F0;
				border-bottom: 1px solid #f8f8f8;
				// z-index: 100;
				font-family: PingFang SC-Medium, PingFang SC;
				display: flex;
				justify-content:space-between;
				.information_item{
					width: 166rpx;
					height: 94rpx;
					// background-color: pink;
					font-size: 24rpx;
					padding-top: 24rpx;
					// color: rgba(143, 143, 143, 1);
					text-align: center;
	
					.item_top{
						width: 166rpx;
						height: 44rpx;
						line-height: 38rpx;
						font-weight: 700;
						// background-color: bisque;
						font-size: 32rpx;
						color:#333333 ;
					}
					.item_bottom{
						width: 166rpx;
						height: 36rpx;
						font-size: 26rpx;
						margin-top: 18rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666 ;
						line-height: 30rpx;
						// background-color: rgb(149, 127, 101);
					}
				}
			}
			.information_hr{
				width: 2rpx;
				height: 80rpx;
				margin-top: 10rpx;
				border-left: 1px dashed rgb(213, 212, 212);
			}

			.header_user{
				width: 700rpx;
				// height: 260rpx;
				// border: 1px solid black;
				font-family: PingFang SC-Medium, PingFang SC;
				margin: 0 auto;
				.information_hr{
					width: 700rpx;
					height: 1rpx;
					margin: 0 auto;
					margin-top: 20rpx;
					background-color:#f3f1f1;
				}

				.user_dotu{
					width: 700rpx;
					margin-top: 40rpx;
					// margin: 10rpx 0 0 20rpx;

					font-size: 32rpx;
					font-weight: 600;
					color: #4D4D4D;
					line-height: 38rpx;
					display: flex;
					.user_itemone{
						width: 700rpx;
						.span2{
							// background: #FFFFFF;
							color: #666;
							font-weight: 500;
							font-size: 28rpx
						}
					}
					.user_itemtwo{
						width: 700rpx;
						.span2{
							color: #666;
							font-weight: 500;
							font-size: 28rpx;
						}
					}
					.user_icon{
						width: 110rpx;
						height: 110rpx;
						margin-left: 20rpx;
						// border: 1px solid black;
						position: absolute;
						right: 4rpx;
						.icon_img{
							width: 60rpx;
							height: 60rpx;
							margin: 0 0 0 20rpx;
							// border: 1px solid black;
						}
						.icon_text{
							width: 110rpx;
							height: 30rpx;
							color: rgba(143, 143, 143, 1);
							font-size: 24rpx;
							// border: 1px solid black;
							margin-top: -16rpx;
						}
					}
				}
				.user_dotuone{
					width: 700rpx;
					.user_itemtwo{
						width: 700rpx;
						margin-top: 40rpx;
						// margin: 10rpx 0 0 20rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #4D4D4D;
						line-height: 38rpx;
					}
					.span2{
						width: 680rpx;
						margin: 0 auto;
						margin-top: 20rpx;
						color: #666;
						font-weight: 500;
						font-size: 28rpx;
						line-height: 44rpx;
					}
				}
				.user_item{
					width: 700rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #4D4D4D;
					line-height: 38rpx;
					margin: 30rpx 0 10rpx 0;
					// background-color: pink;
					.span2{
						color: #666666;
						font-weight: 500;
						font-size: 28rpx;
					}
				}
			}
		// 下方是访问量展示
			.visits_title{
				width: 750rpx;
				height: 90rpx;
				margin-top: 40rpx;
				background-color:#f7f8ff;
				display: flex;
				.visits_title_left{
					width: 6rpx;
					height: 30rpx;
					background: rgba(0, 92, 241, 1);
					margin: 30rpx 0 0 20rpx;
				}
				.visits_title_right{
					width: 500rpx;
					height: 90rpx;
					line-height: 90rpx;
					margin: 0  0 0 14rpx;
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
			.visits{
				width: 706rpx;
				height: 140rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				border-radius: 10rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				background-color: #FFFFFF;
				display: flex;
				justify-content:space-between;

				.information_item{
					width: 220rpx;
					height: 140rpx;
					// background-color: pink;
					font-size: 26rpx;
					padding-top: 22rpx;
					color: #666666;
					text-align: center;
	
					.item_top{
						width: 220rpx;
						height: 50rpx;
						font-size: 44rpx;
						font-weight: 600;
						color: rgba(0, 92, 241, 1);
						line-height: 50rpx;
					}
					.item_bottom{
						width: 220rpx;
						height: 44rpx;
						margin-top: 16rpx;
						font-weight: 500;
					}
				}
			}
			.header_warn{
				width: 740rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(0, 92, 241, 1);
			}
		} 
		.mian{
			width: 740rpx;
			height: 100rpx;
			margin: 0 auto;
			margin-bottom: 120rpx;
			font-size: 24rpx;
			line-height: 100rpx;
			text-align: center;
			color: #666666;
			font-size: 20rpx;
			font-family: PingFang SC-Regular, PingFang SC;
		}
		.bottom{
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			.bottom_main{
				width: 740rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				.pey{
					width: 640rpx;
					height: 90rpx;
					margin: 0 auto;
					margin-top: 15rpx;
					background-color:rgba(0, 92, 241, 1) ;
					border-radius: 50rpx;
					color: #F0F0F0;
					line-height: 90rpx;
					font-size: 34rpx;
					text-align: center;
				}
				// .mian_left{
				// 	width: 100rpx;
				// 	height: 100rpx;
				// 	margin: 10rpx 0 0 60rpx;
				// 	.left_top{
				// 	width: 60rpx;
				// 	height: 54rpx;
				// 	background: url(../../static/images/首页-选中.png) no-repeat;
				// 	background-size: 100% 100%;
				// 	}
				// 	.left_bottom{
				// 		width: 60rpx;
				// 		height: 30rpx;
				// 		font-size: 24rpx;
				// 		text-align: center;
				// 	}
				// }
				// .main_center{
				// 	width: 100rpx;
				// 	height: 100rpx;
				// 	margin: 10rpx 0 0 60rpx;
				// 	.center_top{
				// 		width: 54rpx;
				// 		height: 54rpx;
				// 		margin-left: 4rpx;
				// 		background: url(../../static/images/收藏.png) no-repeat;
				// 		background-size: 100% 100%;
				// 	}
				// 	.center_topclick{
				// 		background: url(../../static/images/收藏1.png) no-repeat;
				// 		background-size: 100% 100%;
				// 	}
				// 	.center_bottom{
				// 		width: 60rpx;
				// 		height: 30rpx;
				// 		font-size: 24rpx;
				// 		text-align: center;
				// 	}
				// }

				.release{
					width: 340rpx;
					height: 90rpx;
					// margin-right: 10rpsx;
					margin: 15rpx 0 0 0rpx;
					background-color: #F50909;
					border-radius: 50rpx;
					text-align:center;
					color: #fff;
					line-height: 90rpx;
					// padding-left: 60rpx;
					font-weight: 400;
					// margin-top: 10rpx;
				}
				.main_right{
					width: 340rpx;
					height: 90rpx;
					// margin-right: 10rpsx;
					text-align: center;
					margin: 15rpx 0 0 0rpx;
					background-color: #F0EDED;
					border-radius: 50rpx;
					color: rgba(56, 56, 56, 1);
					line-height: 90rpx;
					// padding-left: 60rpx;
					// font-weight: 400;
					// .right_i{
					// 	margin-right: 20rpx;
					// }
				}
			}
		}
	}
	// 轮播图相关的穿透
	:deep(.out-box .carousel){
		height: 410rpx; 
	}
	// :deep(.uni-swiper__warp .uni-swiper){
	// 	height: 300rpx; 
	// }
		/* 预览视频弹窗 */
		.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .8);
		z-index: 200;
	}

	.previewvideo {
		width: 100vw;
		height: 100vw;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background-color: #000;
		z-index: 900;
		opacity: 1;
	}

	.close {
		display: flex;
		align-content: center;
		align-items: flex-end;
		position: absolute;
		top: 140rpx;
		right: 20rpx;
		z-index: 900;

		image {
			width: 50rpx;
			height: 50rpx;
			display: block;
			justify-content: center;
			margin-left: 30rpx;
			margin-bottom: 20rpx;
			border-radius: 50%;
			padding: 10rpx;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.videos {
		height: 100vw;
		width: 100vw;
		z-index: 10;
		position: relative;

		video {
			width: 100%;
			height: 100%;
		}
	}
	.nowvideos {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}
	// :deep(.carousel .swiper){
	// 	height: 410rpx;
	// }
	// :deep(.image-wrapper .loaded){
	// 	height: 55vw;
	// }
</style>
